<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link href="__INDEX__/css/Phoebe.css" rel="stylesheet" />
		<link href="__INDEX__/css/all.css" rel="stylesheet" />
		<link href="__INDEX__/css/stock.css" rel="stylesheet" />
		<link href="__INDEX__/css/subscribe.css" rel="stylesheet" />
		<link href="__PUBLIC__/static/css/agent_css.css" rel="stylesheet" />
		<title>申购</title>
		<style>
			.mui-bar-nav~.mui-content {
				padding-top: 0px;
			}
			
			.mui-control-content {
				background-color: white;
				min-height: 736px;
			}
			
			.bidding>ul:first-child>li {
				font-weight: 600;
				color: #000000;
			}
			
			.bidding>ul:not(:first-child)>li>ul>Li {
				text-overflow: ellipsis;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.my_shengou{
				    float: left;
				    width: 23%;
				    height: 40px;
				    line-height: 40px;
				    font-size: 14px;
			}
		</style>

	</head>

	<body style="max-height: 100%;margin-top: 45px;">
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.back(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">申购</h1>
		</header>

		<div class="mui-content" style="background: #fff">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item2mobile">
						申购
					</a>
					<a class="mui-control-item" href="#item3mobile">
						中签
					</a>
					<a class="mui-control-item" href="#item4mobile">
						上架
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" style="width:33%;"></div>
				<div class="mui-slider-group">
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--申购-->
								<div class="subscribe-box subscribe">
									<div class="stock">
											<div class="layui-form-item">
												<span class="my_shengou">产品名称 :</span>
											    <div style="width: 65%;float: left;height: 40px;line-height: 40px;font-size: 14px; border: 1px solid #d4cece;border-radius: 4px;">
											      <select id='goods_list'  lay-filter="aihao">
											        <option value="-1">请选择产品</option>
											        {volist name="goods_list" id="vo"}
														<option value="{$vo.id}">{$vo.name}</option>
													{/volist}
											      </select>
											    </div>
											</div>
											<div style="display: none;background-color: #e9b2b2;" id='goods_detail'>
												    <div class="layui-form-item" >
												    	<span class="my_shengou">发行价格：<label id='goods_detail_price'></label></span>
												    </div>
												    <div class="layui-form-item" >
														<span class="my_shengou">发行数量：<label id='goods_detail_stock'></label></span>
												    </div>
												    <div class="layui-form-item" >
														<span class="my_shengou">已认购数量：<label id='goods_detail_residue_stock'></label></span>
												    </div>
												    <div class="layui-form-item" >
														<span class="my_shengou">剩余数量：<label id='goods_detail_number'></label></span>
												    </div>
												    <div class="layui-form-item" >
														<span class="my_shengou" style="width: 50%;">结束时间：<label id='goods_detail_end_time'></label></span>
												    </div>
											</div>
											<div id="price">
												<span class="my_shengou">认购价格 :</span>
												<input type="text" name='subscribe_price' id="subscribe_price" value="0" disabled="disabled" style="width: 25%;"/>
											</div>
											<div>
												<span class="my_shengou">认购数量 :</span>
												<input type="text" name="buy_number" id="buy_number" style="width: 25%;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
											</div>
											<div>
												<span class="my_shengou">优购券 ({$user_info['coupon']}):</span>
												<input type="text" name="coupon" id="coupon" value="0" style="width: 25%;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
											</div>
											<button class="submit" id='goumai' style="margin-left: 25%;">立即申购</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--中签-->
								<div style="width: 99%;margin-left: 2px;">
									<table class="zizh_table1">
										<thead>
											<tr style="text-align:center; background-color: #dad5d5;line-height: 39px;font-size: 16px;font-weight: bold;padding-left:0">
												<th>产品</th>
												<th>申购日期</th>
												<th>数量</th>
												<th>单价</th>
											</tr>
										</thead>
										<tbody id="tbody">
											{volist name="list" id="vo"}
												<tr>
													<td>{$vo.goods_name}</td>
													<td>{$vo.add_time}</td>
													<td>{$vo.buy_number}</td>
													<td>{$vo.goods_price}</td>
												</tr>
											{/volist}
										</tbody>
									</table>
									<div class="fenye" style="display: block;">
										{$list->render()}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div style="width: 99%;margin-left: 2px;">
									<table class="zizh_table1">
										<thead>
											<tr style="text-align:center; background-color: #dad5d5;line-height: 39px;font-size: 16px;font-weight: bold;padding-left:0">
												<th>产品</th>
												<th>上架时间</th>
												<th>发行时间</th>
												<th>发行数</th>
												<th>发行价</th>
												<th>已认购</th>
											</tr>
										</thead>
										<tbody id="tbody">
											{volist name="launch_list" id="vo"}
												<tr>
													<td>{$vo.name}</td>
													<td>{$vo.add_time}</td>
													<td>{$vo.end_time}</td>
													<td>{$vo.stock + $vo.residue_stock}</td>
													<td>{$vo.price}</td>
													<td>{$vo.residue_stock}</td>
												</tr>
											{/volist}
										</tbody>
									</table>
									<div class="fenye" style="display: block;">
										{$launch_list->render()}
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>

		<!--model-->
			<div class="my-modal">
				<div>
					<h2>申购确认</h2>
					<div>
						<p id="pro_name">产品名称：<span id='goods_name'></span></p>
						<div>
							<ul>
								<li>购买价格：<span id='buy_price' name='buy_price'></span></li>
								<li>购买数量：<span id='buy_num' name='buy_num'></span></li>
								<li>需冻结金额：<span id='freeze_money'></span></li>
							</ul>
						</div>
						<p id="xianyin"></p>
						<div>
							<button type="button" class="shengou_conf" id='queren'>确认</button>
							<button type="reset" class="close_shengou">取消</button>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>
{include file="public/footer" /}
<script src="__PUBLIC__/static/js/mui.js"></script>
<script src="__PUBLIC__/static/js/iscroll.js"></script>
<script src="__PUBLIC__/static/js/subscribe.js"></script>
<script>
	mui.init({
		swipeBack: false
	});
	(function($) {
		$(".mui-scroll-wrapper").scroll({
			indicators: true, //是否显示滚动条,默认是true
		});
	})(mui);
</script>
<script>
	var goods_list = <?php echo json_encode($goods_list) ?>;
	$('#goods_list').change(function(){
		$('#subscribe_price').val(0);
		var goods_id = $("#goods_list").val();
		
		for(var i = 0;i<goods_list.length;i++){
			if(goods_list[i].id == goods_id){
				$('#subscribe_price').val(goods_list[i].price);
				$('#goods_name').text(goods_list[i].name);
				$('#goods_detail_price').text(goods_list[i].price);
				$('#goods_detail_stock').text(goods_list[i].stock + goods_list[i].residue_stock);
				$('#goods_detail_residue_stock').text(goods_list[i].residue_stock);
				$('#goods_detail_number').text(goods_list[i].stock);
				$('#goods_detail_end_time').text(goods_list[i].end_time);
				
				
				var startTime	= goods_list[i].add_time;
				var endTime		= goods_list[i].end_time;
				var start=new Date(startTime.replace("-", "/").replace("-", "/"));
				var end=new Date(endTime.replace("-", "/").replace("-", "/"));
				
				//检查时间
				var cut_time = new Date();
				if(start<cut_time && end>cut_time){
					$("#goumai").attr('disabled',false);
					$("#goumai").css("background-color","#007AFF");
				}else{
					$("#goumai").attr('disabled',true);
					$("#goumai").css("background-color","#c0baba");
				}
			}
		}
		if($("#goods_list").val()>0){
			$('#goods_detail').show();
		}else{
			$('#goods_detail').hide();
		}
	});
</script>
<script>
	$(".submit").click(function() {
		
		var buy_price 	= $('#subscribe_price').val();
		var buy_number 	= $('#buy_number').val();
		var sel			= $("#goods_list").val();		
		var yougou		= $("#coupon").val();
		
		if(sel=="" || sel<0){
			layer.msg('请选择产品');
			return ;
		}
		
		if(buy_number=="" || buy_number<1){
			layer.msg('请输入申购数量');
			return ;
		}
		
		if(yougou !="" && yougou>0 && yougou<buy_number){
			layer.msg('优购券不能少于申购产品数量');
			return ;
		}
		
		$('#buy_price').text(buy_price);
		$('#buy_num').text(buy_number);
		
		var cut_price = Math.ceil(buy_price*100);
		var freeze_money = (cut_price * buy_number)/100;
		$('#freeze_money').text(freeze_money);
		$(".my-modal").css("display", "block");
	})
	
	$('#queren').click(function(){
		$.ajax({
			url: "{:url('index/member/subscribe')}",
			type: 'post',
			data: {
				goods_id 	: $("#goods_list").val(),
				buy_number	: $('#buy_number').val(),
				yougou		: $("#coupon").val()
			}, //表单数据
			success: function(data) {
				$(".my-modal").css("display", "none");
				layer.msg(data.msg, {
					icon: 1,
					time: 2000 //2秒关闭（如果不配置，默认是3秒）
				}, function() {
					if(data.code == 200) {
						location.href = "index.html";
					}
				});
			}
		});
	})
	
	
	
	
</script>
